<template>
  <el-dialog
    v-model="visible"
    title="审核工单"
    width="700px"
    :close-on-click-modal="false"
  >
    <el-form
      ref="reviewFormRef"
      :model="reviewForm"
      :rules="formRules"
      label-width="100px"
    >
      <el-form-item label="工单ID">
        <span class="ticket-id">{{ ticket.ticket_id }}</span>
      </el-form-item>

      <el-form-item label="工单类型">
        <span>{{ ticket.ticket_type_name || ticket.ticket_type || "-" }}</span>
      </el-form-item>

      <el-form-item label="责任人">
        <span>{{ ticket.responsible_person || "-" }}</span>
      </el-form-item>

      <el-form-item label="告警数量">
        <span>{{ ticket.alert_count || 0 }} 条</span>
      </el-form-item>

      <el-form-item label="审核决策" prop="decision">
        <el-radio-group v-model="reviewForm.decision">
          <el-radio label="approved">通过</el-radio>
          <el-radio label="rejected">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="审核意见" prop="comment">
        <el-input
          v-model="reviewForm.comment"
          type="textarea"
          :rows="4"
          placeholder="请输入审核意见（选填，最多500字）"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting">
        提交审核
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { ElMessage, ElMessageBox, ElForm } from "element-plus";
import type { FormInstance } from "element-plus";
import { reviewTicket } from "../../../servers";

// 定义props
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  ticket: {
    type: Object,
    default: () => ({}),
  },
});

// 定义emits
const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
  (e: "reviewed"): void;
}>();

// visible computed 属性
const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit("update:modelValue", value),
});

const reviewFormRef = ref<FormInstance>();
const submitting = ref(false);

// 审核表单
const reviewForm = reactive({
  decision: "approved" as "approved" | "rejected",
  comment: "",
});

// 表单规则
const formRules = {
  decision: [{ required: true, message: "请选择审核决策", trigger: "change" }],
};

// 提交审核
const handleSubmit = async () => {
  if (!reviewFormRef.value) return;

  try {
    await reviewFormRef.value.validate();
  } catch (error) {
    return;
  }

  try {
    await ElMessageBox.confirm(
      `确定要${getDecisionText(reviewForm.decision)}此工单吗？`,
      "确认审核",
      {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }
    );

    submitting.value = true;

    const result = await reviewTicket({
      ticket_id: props.ticket.ticket_id,
      review_decision: reviewForm.decision,
      review_comment: reviewForm.comment || undefined,
    });

    ElMessage.success(result?.message || "审核成功");
    emit("reviewed");
    visible.value = false;
  } catch (error: any) {
    if (error !== "cancel") {
      ElMessage.error(error?.message || "审核失败");
    }
  } finally {
    submitting.value = false;
  }
};

// 获取决策文本
const getDecisionText = (decision: "approved" | "rejected"): string => {
  const map: Record<string, string> = {
    approved: "通过",
    rejected: "拒绝",
  };
  return map[decision] || "";
};

// 取消
const handleCancel = () => {
  visible.value = false;
};
</script>

<style scoped lang="scss">
.ticket-id {
  font-weight: 500;
  color: #333;
}
</style>
